import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import {AtTabs,AtTabsPane} from 'taro-ui'
import './tabs.scss'
 
export default class Tabs extends Component{
    config(){
        navigationBarTitleText='标签页'
    }
    constructor(){
        super(...arguments)
        this.state={
            current: 0,
        }
    }
    handleClick (value) {
        this.setState({
          current: value
        })
      }
    render(){
        const tablist=[{title:'标签页1'},{title:'标签页2'},{title:'标签页3'}]
        return(
            <View>
                <AtTabs current={this.state.current} tabList={tablist} onClick={this.handleClick.bind(this)}>
                    <AtTabsPane current={this.state.current} index={0}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={1}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页二的内容</View>
                    </AtTabsPane>
                    <AtTabsPane current={this.state.current} index={2}>
                        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
                    </AtTabsPane>
                </AtTabs>
            </View> 
        )
    }
}
